<!--
 * @Author: Rachel 943701297@qq.com
 * @Date: 2022-07-15 10:25:37
 * @LastEditors: Rachel 943701297@qq.com
 * @LastEditTime: 2022-07-16 00:23:06
 * @FilePath: \JS\java-script-learning-notes\JSCode\二级菜单.html
 * @Description: 
 * 
 * Copyright (c) 2022 by Rachel 943701297@qq.com, All Rights Reserved. 
-->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>二级菜单</title>
    <link rel="stylesheet" type="text/css" href="style/sdmenu.css" />
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        list-style-type: none;
      }

      a,
      img {
        border: 0;
        text-decoration: none;
      }

      body {
        font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
      }
    </style>
  </head>
  <body>
    <div id="my_menu" class="sdmenu">
      <div>
        <span class="menuSpan">在线工具</span>
        <a href="#">图像优化</a>
        <a href="#">收藏夹图标生成器</a>
        <a href="#">邮件</a>
        <a href="#">htaccess密码</a>
        <a href="#">梯度图像</a>
        <a href="#">按钮生成器</a>
      </div>
      <div class="collapsed">
        <span class="menuSpan">支持我们</span>
        <a href="#">推荐我们</a>
        <a href="#">链接我们</a>
        <a href="#">网络资源</a>
      </div>
      <div class="collapsed">
        <span class="menuSpan">合作伙伴</span>
        <a href="#">JavaScript工具包</a>
        <a href="#">CSS驱动</a>
        <a href="#">CodingForums</a>
        <a href="#">CSS例子</a>
      </div>
      <div class="collapsed">
        <span class="menuSpan">测试电流</span>
        <a href="#">Current or not</a>
        <a href="#">Current or not</a>
        <a href="#">Current or not</a>
        <a href="#">Current or not</a>
      </div>
    </div>
  </body>
  <script src="./tools.js"></script>
  <script>
    let menuSpan = document.querySelectorAll(".menuSpan");
    // console.log(menuSpan);
    // 第一个打开的菜单
    let opendDiv = menuSpan[0].parentNode;
    for (let i = 0; i < menuSpan.length; i++) {
      menuSpan[i].onclick = function () {
        let parentDiv = this.parentNode;
        toggleMune(parentDiv);
        if (opendDiv != parentDiv && !hasClass(opendDiv, "collapsed")) {
          toggleMune(opendDiv);
        }
        opendDiv = parentDiv;
      };
    }

    function toggleMune(obj) {
      // console.log(obj.offsetHeight);
      let begin = obj.offsetHeight;
      toggleClass(obj, "collapsed");
      let end = obj.offsetHeight;
      // console.log(begin + " " + end);
      obj.style.height = begin + "px";
      move(obj, "height", end, 10, function () {
        // 执行完需要删去内联样式，不然就不能再次使用了，内联样式height始终为25px
        obj.style.height = "";
      });
    }

    /* function move(obj, attr, target, speed, callback) {
      clearInterval(obj.timer);
      let current = parseInt(
        window.getComputedStyle(obj, null)[attr].slice(0, -2)
      );
      if (current > target) {
        speed = -speed;
      }
      obj.timer = setInterval(() => {
        let oldValue = parseInt(
          window.getComputedStyle(obj, null)[attr].slice(0, -2)
        );
        let newValue = oldValue + speed;
        if (
          (speed > 0 && newValue > target) ||
          (speed < 0 && newValue < target)
        ) {
          newValue = target;
        }
        obj.style[attr] = newValue + "px";
        if (newValue == target) {
          clearInterval(obj.timer);
          callback && callback();
        }
      }, 30);
    } */
    function addClass(obj, cn) {
      if (!hasClass(obj, cn)) {
        obj.className += " " + cn;
      }
    }
    function hasClass(obj, cn) {
      let reg = new RegExp("\\b" + cn + "\\b");
      return reg.test(obj.className);
    }
    function removeClass(obj, cn) {
      let reg = new RegExp("\\b" + cn + "\\b");
      obj.className = obj.className.replace(reg, "");
    }
    function toggleClass(obj, cn) {
      if (hasClass(obj, cn)) {
        removeClass(obj, cn);
      } else {
        addClass(obj, cn);
      }
    }
  </script>
</html>
